
<template>
    <div class="header">
        <div class="left">
            <span style="font-size:20px">{{  name }}</span>
        </div>
        <div class="right">右</div>
    </div>
</template>

<script setup>
   import { reactive,toRefs } from "vue"
   import {  useRouter } from "vue-router"
   
   const router = useRouter()
   const pathMap = {
    index: "首页",
    add: "添加商品"
   }

   const state = reactive({
    name: "dashboard"
   })

   router.afterEach((to,from, next) => {
    console.log(to);
    state.name = pathMap[to.name]
   })

   const { name } = toRefs(state)



</script>

<style  scoped>
.header{
    height: 50px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: pink;
}
</style>
